<!--  -->
<template>
  <div class="inoculant">
    <van-row v-if="followInfo">
      <van-col span="24" class="txt">接种门诊：{{ followInfo.name }}</van-col>
      <van-col span="24" class="txt">
        <i class="iconfont icondaohang"></i>
        {{ followInfo.address }}
      </van-col>
      <van-col span="24" class="txt">
        <i class="iconfont icondianhua"></i>
        {{ followInfo.phone }}
      </van-col>
      <van-col span="24" class="txt" style="margin-bottom:0;">
        <i class="iconfont iconshijian"></i>
        {{ followInfo.inoculationTime }}
      </van-col>
    </van-row>
    <van-divider class="line"/>
    <van-row v-if="data">
      <van-col span="12" class="txt">接 种 人：{{ data.name }}</van-col>
      <van-col span="12" class="txt">出生日期：{{ data.birthday ? $moment(data.birthday).format('YYYY-MM-DD') : ''}}</van-col>
      <van-col span="24" class="txt">疫苗种类：{{ data.vaccineType }}</van-col>
      <van-col span="12" class="txt">核定接种日期：{{ data.approvedVaccinationDate ? $moment(data.approvedVaccinationDate).format('YYYY-MM-DD') : ''}}</van-col>
      <van-col span="12" class="txt">时间：{{ data.approvedVaccinationTime }}</van-col>
      <van-col span="24" class="txt tip">疫情期间为避免医疗资源浪费，如您不能如约前往，请主动告知门诊，谢谢！</van-col>
    </van-row>
    <i class="iconfont iconbianji forbid" v-if="forbid"></i>
    <i class="iconfont iconbianji" @click="edit" v-else></i>

    <!-- 重要提示 -->
    <van-dialog v-model="show" title="重要提示！" confirm-button-text="下一步" @confirm="next">
      <div class="content">
        <p>新冠肺炎是一种新发传染病。根据目前我市疫情防控要求，为减少家长及儿童前往潜在感染风险，本门诊即日起实行全面网络预约接种服务。为了保障全民战“疫”胜利，维护公众平安健康，请您务必如实回答下列问题：</p>
        <p class="warning">郑重提醒：如因隐瞒事实造成疫情传播等严重后果的，您需要承担相应的法律责任。</p>
      </div>
    </van-dialog>

    <!-- 反馈信息 -->
    <van-dialog
      v-model="show2"
      title="反馈信息"
      confirm-button-text="提交"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-form @submit="submit" class="question" ref="form">
        <div class="sub-tit">接种者健康状况：</div>
        <div class="q-tit">1.是否发热</div>
        <van-field name="radio" :rules="[{ required: true, message: '请选择是否发热' }]">
          <template #input>
            <van-radio-group v-model="form.isFever" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="q-tit">2.是否有湿疹</div>
        <van-field name="radio" :rules="[{ required: true, message: '请选择是否有湿疹' }]">
          <template #input>
            <van-radio-group v-model="form.isEczema" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="q-tit">3.是否有鼻塞流涕等症状</div>
        <van-field
          name="radio"
          label-width="180"
          :rules="[{ required: true, message: '请选择是否有鼻塞流涕等症状' }]"
        >
          <template #input>
            <van-radio-group v-model="form.isCold" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="sub-tit">接触史询问：</div>
        <div class="q-tit">1.受种者及陪同人员近14天有无发热、咳嗽等呼吸道症状或出现乏力、腹泻等症状？</div>
        <van-field name="checkboxGroup" :rules="[{ required: true, message: '请选择' }]">
          <template #input>
            <van-radio-group v-model="form.contactOne" direction="horizontal">
              <van-radio name="1">有,接种者</van-radio>
              <van-radio name="2">有,陪同者</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="q-tit">2.受种者及其陪同人员近14天是否前往湖北或周边其他疫区或从该区域返回？</div>
        <van-field name="checkboxGroup" :rules="[{ required: true, message: '请选择' }]">
          <template #input>
            <van-radio-group v-model="form.contactTwo" direction="horizontal">
              <van-radio name="1">有,接种者</van-radio>
              <van-radio name="2">有,陪同者</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="q-tit">3.受种者及其陪同人员近14天是否有接触过来自湖北或周边疫区（或来自有病例报告社区）的有发热或呼吸道症状的人员？</div>
        <van-field name="checkboxGroup" :rules="[{ required: true, message: '请选择' }]">
          <template #input>
            <van-radio-group v-model="form.contactThree" direction="horizontal">
              <van-radio name="1">有,接种者</van-radio>
              <van-radio name="2">有,陪同者</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <div class="sub-tit">陪同人信息：</div>
        <van-field
          v-model="form.companions"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }, { validator:nameValidator, message: '请填写正确的姓名' }]"
        />
        <!-- <div style="margin: 16px;text-align:center;">
          <van-button color="#FF6600" round type="info" native-type="submit" size="small">提交</van-button>
        </div>-->
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import DialogLayout from "@/components/dialog";
import { updateInformation } from "@/api/user";
export default {
  components: { DialogLayout },
  data() {
    return {
      show: false,
      show2: false,
      form: {}
    };
  },
  props: {
    data: {},
    followInfo: {
      default() {
        return {};
      }
    }
  },
  computed: {
    forbid() {
      if(!this.data) return true;
      // 0是电话问询1是手机工单
      const today = this.$moment();
      const {
        processingResult,
        isHealthy,
        approvedVaccinationDate
      } = this.data;

      if (processingResult == 0) return true;
      if (processingResult == 1) {
        // 已经填写过不能重复填写
        if (isHealthy === 0 || isHealthy === 1) {
          return true;
        } else {
          return false;
        }
      }
    }
  },
  //方法集合
  methods: {
    edit() {
      this.show = true;
    },
    next() {
      this.show = false;
      this.show2 = true;
    },
    beforeClose(action, done) {
      if (action == "confirm") {
        this.$refs.form
          .validate()
          .then(res => {
            const data = {
              ...this.form,
              vaccinationInformationId: this.data.vaccinationInformationId
            };

            updateInformation(data)
              .then(res => {
                // this.$notify({ type: "success", message: "提交反馈成功！" });
                this.$dialog.alert({
                  title: "提交成功！",
                  message:
                    "已将您填写的信息反馈至接种门诊。疫情期间，请您在门诊告知的时间内携带相关证件前往接种。衷心感谢您的配合，让我们携手赢的这场无声的战“疫”！"
                });
                this.$emit("submit");
                done();
              })
              .catch(err => {
                this.$notify({ type: "danger", message: err.msg });
                done(false);
              });
          })
          .catch(err => {
            done(false);
          });
      } else {
        done();
      }
    },
    nameValidator(val) {
      return /^[\u4E00-\u9FA5]{2,6}$/.test(val);
    },
    validator(val) {
      return /^1[3456789]\d{9}$/.test(val);
    },
    submit() {
      this.show2 = false;
      this.$dialog.alert({
        title: "提交成功！",
        message:
          "已将您填写的信息反馈至接种门诊。疫情期间，请您在门诊告知的时间内携带相关证件前往接种。衷心感谢您的配合，让我们携手赢的这场无声的战“疫”！"
      });
    }
  },
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang='scss' scoped>
.inoculant {
  position: relative;
  padding: 0.4rem /* 30/75 */;
  background: #ffffff;
  font-size: .32rem /* 24/75 */;
  margin-bottom: 0.27rem /* 20/75 */;
  .txt {
    display: flex;
    align-items: center;
    margin-bottom: .27rem /* 20/75 */;
    .iconfont {
      color: #909399;
      margin-right: .13rem /* 10/75 */;
    }
  }
  .iconbianji {
    position: absolute;
    right: 0.27rem /* 20/75 */;
    top: 0.27rem /* 20/75 */;
    color: $baseColor;
  }

  .forbid {
    color: #cccccc;
  }

  .tip {
    color: #ee0a24;
    line-height: 1.6;
  }

  .line {
    margin: .27rem /* 20/75 */ 0;
  }
}
.content {
  padding: 0.27rem /* 20/75 */;
  text-indent: 2em;
  font-size: 0.37rem /* 28/75 */;
  line-height: 1.6;
  .warning {
    text-indent: 0;
    color: red;
  }
}

.popup-height {
  height: 80%;
}
.question {
  // height: 100%;
  height: 12rem /* 900/75 */;
  overflow: auto;
  .sub-tit {
    font-size: 0.37rem /* 28/75 */;
    margin: 0.32rem /* 24/75 */ 0;
    color: $baseColor;
    padding: 0 0.27rem /* 20/75 */;
  }
}

.q-tit {
  padding: 0 0.42rem;
  font-size: 0.37rem /* 28/75 */;
  line-height: 1.6;
}
</style>